<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Visual page editor basic tests (part 2 - visual editing)</title>

	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>
	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Visual page editor basic tests (part 2)</h1>

	<h2 class="test_section">Widgets, images, open/save (relative layout)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Standard setup things: Clear the browser cache. Launch the Maqetta server. 
				Login if necessary. 
				In some cases, you'll want to setup a virgin user environment by creating a whole new user login.</li>
		<li>Click on the "New file" icon on the main toolbar. Choose any filename.</li>
		<li>Drag a few primitive widgets onto the canvas (e.g., Button, TextBox, Calendar).</li>
		<li>Drag an image onto the canvas (e.g., SampleBanner.jpg).</li>
		<li>Click on the "Save" icon on the main toolbar to save the new file. <span style="color:red">The asterisks that indicates that the file is "dirty" should go away.</span></li>
		<li>Click on the "X" close button for the editor tab for this file</li>
		<li>In the Files palette, double-click on the file you just created to re-open the file.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>The saved file should open and its contents should be the same as how it was when you clicked on the Save button.</li>
		<li>The canvas should show the widgets and image(s) that you dragged onto the canvas.</li>
		<li>The Outline palette should show the widgets and image(s).</li>
	</ol>

	<h2 class="test_section">Container widgets (continuation of previous)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Re-open the file created in the previous steps.</li>
		<li>Drag a few container widgets onto the canvas (e.g., ContentPane, Accordion, TabContainer).</li>
		<li>Drag an HTML DIV widget onto the canvas.</li>
		<li>Drag a couple of primitive widgets into each container (e.g., Button, TextBox, HTML LABEL, HTML SPAN).</li>
		<li>Drag a couple of container widgets inside other containers to create nested containers (e.g., Accordion inside of a TabContainer). 
				Drag primitive widgets into the nested container widget.</li>
		<li>Click on the "Save" icon on the main toolbar to save the new file. <span style="color:red">The asterisks that indicates that the file is "dirty" should go away.</span></li>
		<li>Click on the "X" close button for the editor tab for this file</li>
		<li>In the Files palette, double-click on the file you just created to re-open the file.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>The saved file should open and its contents should be the same as how it was when you clicked on the Save button.</li>
		<li>The canvas should show the widgets and image(s) that you dragged onto the canvas.</li>
		<li>The Outline palette should show the widgets and image(s). 
				Within the Outline palette, the widgets that you dragged into containers should appear as nested children of their container widget.</li>
	</ol>

	<h2 class="test_section">Selecting, moving, resizing, and deleting widgets</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Re-open the file created in the previous steps.</li>
		<li>Click to select various widgets.</li>
		<li>Move selected widgets to different locations. 
				With relative layout, you should be able to re-order widgets within the flow via drag/drop. 
				With absolute layout, you should be able to change widget position.</li>
		<li>Some widgets are resizable and show resize knobs when selected. For example, ContentPane and Calendar. Drag the knobs to resize some widgets.</li>
		<li>Delete a widget by selecting it and then invoking the "Delete" command from the context menu.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>You should be able to select, move, resize and delete widgets.</li>
	</ol>

	<h2 class="test_section">Design/source views (continuation of previous)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Re-open the file created in the previous steps.</li>
		<li>Click on the Split View icon (top/bottom views).</li>
		<li>In the source editor, select and delete one of the widgets.</li>
		<li>In the source editor, select, copy, paste one of the widgets to clone a second version of that widget.</li>
		<li>Change some textual content (e.g., a button label) and change the width property of a widget.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>The visual image of the document should reflect immediate changes with every change 
			to the source code of the document. Changes should occur with each keystroke.</li>
	</ol>

	<h2 class="test_section">Absolute layout</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Standard setup things: Clear the browser cache. Launch the Maqetta server. 
				Login if necessary. 
				In some cases, you'll want to a virgin user environment by creating a whole new user login.</li>
		<li>Turn on absolute layout by clicking on the Switch Layout icon.</li>
		<li>Repeat all of the tests that you ran above in relative layout mode.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>Similar results as for relative layout, except (of course) widgets will be positioned at absolute locations instead of showing a flow layout.</li>
	</ol>

	<h2 class="test_section">Cut/copy/paste/delete from context menu</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Standard setup things: Clear the browser cache. Launch the Maqetta server. 
				Login if necessary. 
				In some cases, you'll want to a virgin user environment by creating a whole new user login.</li>
		<li>Add a Button, an Accordion, ComboBox, Calendar, SPAN, DIV and a few LABEL elements to the page.</li>
		<li>Verify that the context menu commands cut, copy, paste and delete are working on individually selected widgets.</li>
		<li>Verify that the context menu commands cut, copy, paste and delete are working with multiple selection.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>(See notes above for expected behavior)</li>
	</ol>

	<h2 class="test_section">Surround with (&lt;div&gt; and &lt;span&gt;)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Standard setup things: Clear the browser cache. Launch the Maqetta server. 
				Login if necessary. 
				In some cases, you'll want to a virgin user environment by creating a whole new user login.</li>
		<li>Add a Button, an Accordion, ComboBox, Calendar, SPAN, DIV and a few LABEL elements to the page.</li>
		<li>Individually select a couple of widgets (both Dojo and HTML) and issue a "Surround with &lt;div&gt;" command from the context menu.</li>
		<li>Individually select a couple of widgets (both Dojo and HTML) and issue a "Surround with &lt;span&gt;" command from the context menu.</li>
		<li>Multiply select widgets that share the same parent (including both Dojo and HTML) and issue a "Surround with &lt;div&gt;" command from the context menu.</li>
		<li>Multiply select widgets that share the same parent (including both Dojo and HTML) and issue a "Surround with &lt;span&gt;" command from the context menu.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>In both the Outline palette and in source view, 
			the selected widgets should have become the children of DIVs or SPANs, as appropriate.</li>
	</ol>

	<h2 class="test_section">Reorder commands (Move to front, Move to back, Move forward, Move backward)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Standard setup things: Clear the browser cache. Launch the Maqetta server. 
				Login if necessary. 
				In some cases, you'll want to a virgin user environment by creating a whole new user login.</li>
		<li>New HTML File - hi-fi page</li>
		<li>Bring up context menu in both canvas and Outline palette
			<div class='expectedResults_subsection'>
				<ul>
					<li>You should menu commands Move to front, Move to back, Move forward, Move backward</li>
					<li>All four commands should be disabled</li>
				</ul>
			</div>
		</li>
		<li>Add a Button</li>
		<li>Bring up context menu in both canvas and Outline palette
			<div class='expectedResults_subsection'>
				<ul>
					<li>You should menu commands Move to front, Move to back, Move forward, Move backward</li>
					<li>All four commands should be disabled</li>
				</ul>
			</div>
		</li>
		<li>Switch to absolute positioning</li>
		<li>Add a CheckBox, Calendar, ColorPalette, Rectangle, and a Image widget from clipart section</li>
		<li>Add a DIV. Inside of the DIV, drop an HTML Button and an HTML Select</li>
		<li>Open up Outline palette (we will be looking at it repeatedly)</li>
		<li>Select the CheckBox</li>
		<li>Bring up context menu in both canvas and Outline palette
			<div class='expectedResults_subsection'>
				<ul>
					<li>You should menu commands Move to front, Move to back, Move forward, Move backward</li>
					<li>Because the CheckBox is the first absolute child, only Move to front and move forward should be enabled.</li>
				</ul>
			</div>
		</li>
		<li>Issue a move forward command
			<div class='expectedResults_subsection'>
				<ul>
					<li>In the Outline palette, the Checkbox should now have moved after the Calendar</li>
				</ul>
			</div>
		</li>
		<li>Issue an Undo command</li>
		<li>Select the DIV</li>
		<li>Bring up context menu in both canvas and Outline palette
			<div class='expectedResults_subsection'>
				<ul>
					<li>You should menu commands Move to front, Move to back, Move forward, Move backward</li>
					<li>Because the DIV is the last absolute child, only Move to back and move backward should be enabled.</li>
				</ul>
			</div>
		</li>
		<li>Issue a move backward command
			<div class='expectedResults_subsection'>
				<ul>
					<li>In the Outline palette, the DIV should now have moved before the clipart Image widget</li>
				</ul>
			</div>
		</li>
		<li>Issue an Undo command</li>
		<li>Multi-select the Calendar and Rectangle.</li>
		<li>Bring up context menu in both canvas and Outline palette
			<div class='expectedResults_subsection'>
				<ul>
					<li>You should menu commands Move to front, Move to back, Move forward, Move backward</li>
					<li>Because the Calendar and Rectangle are not adjacent children, only Move to front and move to back should be enabled.</li>
				</ul>
			</div>
		</li>
		<li>Issue a move to back command
			<div class='expectedResults_subsection'>
				<ul>
					<li>In the Outline palette, the Calendar and Rectangle should be the first two children of the BODY</li>
				</ul>
			</div>
		</li>
		<li>Issue an Undo command</li>
		<li>Multi-select the Calendar and ColorPalette.</li>
		<li>Bring up context menu in both canvas and Outline palette
			<div class='expectedResults_subsection'>
				<ul>
					<li>You should menu commands Move to front, Move to back, Move forward, Move backward</li>
					<li>Because the Calendar and Rectangle are now adjacent children, all four reorder commands should be enabled.</li>
				</ul>
			</div>
		</li>
		<li>Issue a move forward command
			<div class='expectedResults_subsection'>
				<ul>
					<li>In the Outline palette, the  Calendar and ColorPalette should be immediately after the Rectangle</li>
				</ul>
			</div>
		</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>As described above.</li>
	</ol>

	<h2 class="test_section">Select/unselect commands</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Standard setup things: Clear the browser cache. Launch the Maqetta server. 
				Login if necessary. 
				In some cases, you'll want to a virgin user environment by creating a whole new user login.</li>
		<li>New HTML File - hi-fi page</li>
		<li>Bring up context menu in both canvas and Outline palette
			<div class='expectedResults_subsection'>
				<ul>
					<li>You should menu commands Select parent, Select ancestor..., and Unselect all</li>
					<li>All three commands should be disabled</li>
				</ul>
			</div>
		</li>
		<li>Add a TabContainer. Add an Accordion inside of TabContainer. Add a Button and Checkbox inside of Accordion</li>
		<li>Select the Button and bring up context menu on canvas
			<div class='expectedResults_subsection'>
				<ul>
					<li>All three commands should be enabled</li>
				</ul>
			</div>
		</li>
		<li>Issue a Select parent command
			<div class='expectedResults_subsection'>
				<ul>
					<li>The ContentPane for Accordion should be selected</li>
				</ul>
			</div>
		</li>
		<li>Consecutively issue 3 more Select parent commands, and observe what gets selected
			<div class='expectedResults_subsection'>
				<ul>
					<li>The Accordion should be selected, then the ContentPane for TabContainer, than TabContainer</li>
				</ul>
			</div>
		</li>
		<li>Select the Button and bring up context menu on canvas and issue a Select ancestor command
			<div class='expectedResults_subsection'>
				<ul>
					<li>The Select ancestor dialog should appear</li>
					<li>The list of options in the dropdown should show ContentPane, Accordion, ContentPane, TabContainer</li>
				</ul>
			</div>
		</li>
		<li>From the menu, choose the Accordion
			<div class='expectedResults_subsection'>
				<ul>
					<li>The Accordion should now be selected</li>
				</ul>
			</div>
		</li>
		<li>Select the Button and Checkbox, bring up context menu on canvas and issue an Unselect all command
			<div class='expectedResults_subsection'>
				<ul>
					<li>Nothing should be selected</li>
				</ul>
			</div>
		</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>As described above.</li>
	</ol>

</body>
</html>
